@charset "UTF-8";
:root {
  --main-color: #ffdc97;
  --color-grey: #666;
  --color-light-grey: #999;
  --bezier-mazel: cubic-bezier(0, 0, 0.58, 1);
  --bezier-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --fixed-horizontal-prop: 4.6875%;
  --fixed-vercital-prop: 5.1%;
  --f-size-72: 72px;
  --f-size-60: 60px;
  --f-size-33: 33px;
  --title-font-size:30px;
  --f-size-24: 24px;
  --f-size-18: 18px;
  --f-size-14: 14px;
}

html,
body,
div,
p,
ol,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
select,
button,
textarea,
iframe,
table,
th,
td,
header,
section,
article {
  margin: 0;
  padding: 0;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", "黑体", "Helvetica Neue", "Source Han Sans CN", "sans-serif", "Arial", "Hiragino Sans GB";
  font-size: var(--f-size-14);
  color: var(--color-grey);
  background: #fff;
}

/*声明 WebFont  Alibaba-PuHuiTi-H (阿里巴巴普惠体H) */
@font-face {
  font-family: "AlibabaPuHuiTiH";
  src: url("../fonts/Alibaba-PuHuiTi-Heavy.eot?v=1584bf5");
  src: url("../fonts/Alibaba-PuHuiTi-Heavy.eot?#font-spider") format("embedded-opentype"), url("../fonts/Alibaba-PuHuiTi-Heavy.woff2?v=72c8ad3") format("woff2"), url("../fonts/Alibaba-PuHuiTi-Heavy.woff?v=0fa401d") format("woff"), url("../fonts/Alibaba-PuHuiTi-Heavy.ttf?v=bc032ac") format("truetype"), url("../fonts/Alibaba-PuHuiTi-Heavy.svg?v=809788f") format("svg");
  font-weight: normal;
  font-style: normal;
}
img {
  width: 100%;
  border: 0 none;
  vertical-align: top;
  outline: none;
}

ul,
li {
  list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

input,
button,
textarea {
  font-family: "Microsoft YaHei", "Arial", "Sans-serif", "Helvetica";
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}

button {
  cursor: pointer;
}

i,
em,
cite,
u {
  font-style: normal;
}

input:focus,
textarea:focus {
  outline: none;
}

a {
  color: #434343;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
  color: var(--main-color);
}

a:focus {
  outline: none;
}

.clearfix:after {
  content: ""; /*内容为“.”就是一个英文的句号而已。也可以不写。*/
  display: block; /*加入的这个元素转换为块级元素。*/
  clear: both; /*清除左右两边浮动。*/
  visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
  line-height: 0; /*行高为0；*/
  height: 0; /*高度为0；*/
  font-size: 0; /*字体大小为0；*/
}

.clearfix {
  *zoom: 1;
}

.blue {
  color: var(--main-color);
}

.fl {
  float: left;
}

.fr {
  float: right;
}

body {
  overflow-x: hidden;
  color: #fff;
}

body.hidden {
  overflow: hidden;
}

body.modal-open {
  position: fixed;
  width: 100%;
}

@media screen and (max-width: 1920px) {
  :root {
    --f-size-60: 48px;
    --f-size-72: 60px;
    --f-size-33: 30px;
  }
}
@media screen and (max-width: 1460px) {
  :root {
    --f-size-72: 48px;
    --f-size-60: 40px;
    --f-size-24: 20px;
    --f-size-18: 16px;
    --f-size-33: 26px;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --fixed-horizontal-prop: 20px;
    --fixed-vercital-prop: 22px;
    --f-size-72: 36px;
    --f-size-60: 24px;
    --f-size-24: 18px;
    --f-size-18: 15px;
    --f-size-14: 13px;
  }
}
@media screen and (max-width: 480px) {
  :root {
    --f-size-72: 30px;
    --f-size-60: 20px;
    --title-font-size:20px;
    --f-size-24: 16px;
    --f-size-18: 14px;
    --f-size-14: 12px;
  }
}
@media screen and (max-width: 320px) {
  :root {
    --f-size-14: 11px;
  }
}